<template>
  <div class="search_container">
    <!-- 搜索栏 -->
    <form action="/" class="search_tab">
      <van-search
        v-model="SearchText"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        background="#3296fa"
        @focus="isResultShow = false"
      />
    </form>
    <!-- 组件展示逻辑 -->
    <!-- 当用户，没有触发搜索框，也没有回车搜索的时候展示搜索历史组件 -->
    <!-- 当用户触发搜索框，但是还没有点击搜索的时候，展示搜索建议组件 -->
    <!-- 当用户触发搜索框，点击搜索的时候，展示搜索结果组件 -->
    <!-- 另外，当用户发起就一轮搜索之后，在重新搜索的时候就会激发搜索框的获得焦点的事件，展示搜索建议，按下回车发起搜索，展示搜索结果 -->

    <!-- 先看用户有没有发起搜索，在看用户在输入框里面有没有输入内容， -->
    <!-- 搜索结果 -->
    <search-results
      v-if="isResultShow"
      :searchText="SearchText"
    ></search-results>
    <!-- 搜索建议 -->
    <search-sugesstion
      v-else-if="SearchText"
      :searchText="SearchText"
      @search="onSearch"
    ></search-sugesstion>
    <!-- 搜索历史 -->
    <search-history
      v-else
      :searchHistories="searchHistories"
      @searchHistories="onSearch"
      @deleteAllHistories="searchHistories = []"
    ></search-history>
  </div>
</template>

<script>
import SearchHistory from './components/search_history';
import SearchSugesstion from './components/search_sugesstion';
import SearchResults from './components/search_results';
import { setItem, getItem } from '@/utils/storage.js';

export default {
  components: {
    SearchHistory,
    SearchSugesstion,
    SearchResults,
  },
  data() {
    return {
      // 搜索框的文本
      SearchText: '',
      //   控制搜索结果的显示和隐藏,默认隐藏
      isResultShow: false,
      //   存储搜索历史记录
      searchHistories: getItem('token_search_history') || [],
    };
  },
  watch: {
    //   侦听器要侦听组件data里面的数据变化
    // 这是侦听器的简单写法，不可以添加自定义属性
    searchHistories(val) {
      console.log(val);
      setItem('token_search_history', val);
    },
    // 这是侦听器的完整写法，这个可以添加一些自定义属性，比如深度侦听等
    // searchHistories: {
    //   handler(val) {
    //     console.log(val);
    //   },
    // },
  },
  methods: {
    // 用户在搜索框中发起了搜索事件
    onSearch(val) {
      //   console.log(val);
      //   点击搜索建议发起搜索时要把搜索建议显示到搜索框中
      this.SearchText = val;
      //   将用户输入的关键字保存起来，
      // 保存进去的数据不能有重复的，并且最后添加的数据一定要排在最前面
      //   indexOf 方法用于在数组中查找元素，如果找到了返回该元素的索引，没有找到返回-1
      const index = this.searchHistories.indexOf(val);
      if (index !== -1) {
        //   找到了重复的元素
        this.searchHistories.splice(index, 1);
      } else {
        //   没有找到重复的元素
        this.searchHistories.unshift(val);
      }
      //   这个时候，就要将搜索结果展示出来
      this.isResultShow = true;
    },
    onCancel() {
      //   console.log('取消');
      //   回退
      this.$router.back();
    },
  },
};
</script>

<style lang="less" scoped>
.search_container {
  margin-top: 108px;
  .van-search__action {
    color: #fff;
  }
  .search_tab {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
  }
}
</style>
